<template>
    <div>
        <a-table :loading="loading" :columns="columns" :data-source="$store.state.rank.rank_list" :pagination="false">
        </a-table>
        <a-pagination v-model="$store.state.rank.rankData.nowPage" style="margin-top: 7%" show-quick-jumper :pageSize=1 :default-current="1" :total="$store.state.rank.rank_list_total_page"  @change="pageChange" />
    </div>


</template>
<script>
    const columns = [
        {
            title: '排名',
            dataIndex: 'rank',
            key: 'rank',
            width:"10%"
        },
        {
            title: '昵称',
            dataIndex: 'alias',
            key: 'alias',
            width: "20%",
            ellipsis: true,
        },
        {
            title: '年级',
            dataIndex: 'grade',
            key: 'grade',
            ellipsis: true,
        },
        {
            title: '刷题量',
            dataIndex: 'amount',
            key: 'amount',
            ellipsis: true,
        },
        {
            title: '正确率',
            dataIndex: 'accuracy',
            key: 'accuracy',
            ellipsis: true,
        },
    ];



    export default {
        name: "RankList",

        data(){
            return({
                columns,
                defaultPageSize:7,
                loading:false
            })
        },
    methods:{
        pageChange(page){
            this.loading = true
            this.$store.dispatch('rank/getRanking',page).catch(()=>{
                this.$message.error("网络异常")
            }).then((res)=>{
                if(res===null){
                    this.$message.error("网络异常")
                }else if(res.code === 1){
                    this.loading = false;
                }else{
                    this.$message.error(res.msg)
                }
            })
        }
    },
    // mounted() {
    //     this.loading = true
    //     this.$store.dispatch('rank/getRanking',1).catch(()=>{
    //         this.$message.error("网络异常")
    //     }).then((res)=>{
    //         if(res===null){
    //             this.$message.error("网络异常")
    //         }else if(res.code === 1){
    //             this.loading = false;
    //         }else{
    //             this.$message.error(res.msg)
    //         }
    //     })
    // }


    }
</script>
